import { Button, Checkbox, Form, Input } from 'antd';
import React, { useState, Fragment } from 'react';
//引入发起请求的方式
import * as api from "@/api/users"
import storage from "@/utils/storage"
import { useNavigate } from "react-router-dom"
import Loading from '../../components/Loading';
//使用图标
import { SyncOutlined } from "@ant-design/icons"
import "./index.css"
let syncOutlinedIcon = (
    <SyncOutlined style={{ fontSize: 50 }} spin />
)
const Login = () => {
    let navigate = useNavigate()
    //表单验证通过
    const onFinish = (values) => {
        // console.log('Success:', values);
        //显示加载动画
        let loadingClose = Loading({ visible: true, tip: "正在登入...", size: 'small', indicator: syncOutlinedIcon })

        api.login(values.username, values.password)
            .then(res => {
                // console.log(res)
                if (res.data.state) {
                    let { userInfo, token } = res.data;
                    //存到本地
                    storage.set('wf-userInfo', userInfo)
                    storage.set('wf-token', token)
                    //跳转到主页
                    navigate("/")
                    //关闭加载动画
                    loadingClose()
                }
            })
    };
    //表单验证不通过
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const validatPassword = (rule, value) => {
        let reg = /[\-_\w\d]{3,10}/
        if (reg.test(value)) {
            return Promise.resolve()
        } else {
            return Promise.reject('密码是5-10位数')
        }
    }

    return (
        <Fragment>
            <div className="bg"></div>
            <div className="loginForm">
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={
                            [
                                {
                                    required: true,
                                    message: "请输入用户名"
                                }
                            ]
                        }
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                validator: validatPassword

                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form >
            </div>
        </Fragment>

    );
};

export default Login;